@mixin box__shadow{
  -webkit-box-shadow: 0px 0px 20px 5px #ccc;
  -moz-box-shadow: 0px 0px 20px 5px #ccc;
  box-shadow: 0px 0px 20px 5px #ccc;
}
@mixin transition($t){
  -webkit-transition: #{$t}ms;
  -moz-transition: #{$t}ms;
  -ms-transition: #{$t}ms;
  -o-transition: #{$t}ms;
  transition: #{$t}ms;
}

.banner__img{
  display: block;
  width: 100%;
}

.pdts{
  .pdts__col{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 30px;
    .pdt__a{
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
      background-color: #fff;
      @include box__shadow;
      &:hover{
        @include transition(1000);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
      }
      &:before{
        content: ' ';
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        top: 0;
        background-color: #000;
        background-color: rgba(0,0,0,0.6);
        opacity: 0.6;
        -ms-filter: alpha(opacity=60);
        filter: alpha(opacity=60);
        -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
      }
      .pdt__img{
        width: 100%;
      }
      .pdt__name{
        font-size: 1.2em;
        color: #fff;
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      }
    }
  }
}

@media screen and (max-width: 768px){
  .pdts{
    width: 100%;
  }
}
@media screen and (min-width: 768px){
  .pdts{
    width: 80%;
    margin: 0 auto;
  }
}
